<template lang="html">
  <div class="app">
    <top-header/>
    <div class="w1200 activity actCommon">
      <div class="bar">
        <div class="select-city">
          选择城市：
          <ul class="inline ver-middle">
            <li
            v-for='(item,index) in listCity'
            :class='{active:index==num}'
            @click='addClass1(index)'>{{item.name}}</li>
          </ul>
          <div class="bar-more inline" v-if='listCity.length>14'>
            更多 <i class="el-icon-arrow-right"></i>
          </div>
        </div>
      </div>
      <div class="content">
        <div class="left-act fl">
          <ul class="act-list" v-if='isShow'>
            <div class="tit-bar">
              活动预告
            </div>
            <li v-for='(item,index) in this.$store.state.activity.acts'>
              <router-link :to='{name:"actDetail",params: {id:index}}'><img v-lazy="item.img" alt=""></router-link>
              <div class="info">
                <span class="tit">{{item.tit}}</span>
                <div class="parkName fr">
                  <span class="parkLogo ver-middle">
                    <!-- <img v-lazy="item.logo" alt=""> -->
                  </span>
                  {{item.parkname}}
                </div>
              </div>
              <div class="info2">
                <span class="time"><i class="icon time ver-middle"></i>时间：{{item.time}}</span>
                <span class="pos"><i class="icon pos ver-middle"></i>地点：<em>{{item.pos}}</em></span>
              </div>
              <div class="num overhide">
                <span><i class="icon numL ver-middle"></i>人数限额：{{item.num}}</span>
                <span class="price fr" v-if='item.isFree'>{{item.price}}</span>
                <span class="price fr" v-else><em>{{item.price}}</em>元 起</span>
              </div>
            </li>
          </ul>
          <ul class="act-list fl" v-else>
            <div class="tit-bar">
              活动回顾
            </div>
            <li v-for='(item,index) in this.$store.state.activity.acts' v-if="index<2">
              <router-link to='/actDetail'><img v-lazy="item.img" alt=""></router-link>
              <div class="info">
                <span class="tit">{{item.tit}}</span>
                <div class="parkName fr">
                  <span class="parkLogo ver-middle">
                    <!-- <img v-lazy="item.logo" alt=""> -->
                  </span>
                  {{item.parkname}}
                </div>
              </div>
              <div class="info2">
                <span class="time"><i class="icon time ver-middle"></i>时间：{{item.time}}</span>
                <span class="pos"><i class="icon pos ver-middle"></i>地点：<em>{{item.pos}}</em></span>
              </div>
              <div class="num overhide">
                <span><i class="icon numL ver-middle"></i>人数限额：{{item.num}}</span>
                <span class="price fr" v-if='item.isFree'>{{item.price}}</span>
                <span class="price fr" v-else><em>{{item.price}}</em>元 起</span>
              </div>
            </li>
          </ul>
        </div>
        <!-- 右边 -->
        <div class="right-act fr">
          <div class="recall" v-if='isShow'>
            <div class="tit-bar">
              活动回顾
              <div class="more fr" @click='actTab2()'>
                更多
              </div>
            </div>
            <ul>
              <router-link to='/actDetail' v-for='(item,index) in this.$store.state.activity.acts' v-if="index<2" key='item.tit'>
                <li>
                  <div class="imgBox">
                    <img v-lazy="item.img" alt="">
                  </div>
                  <div class="info">
                    <div class="tit">{{item.tit}}</div>
                    <div class="time">
                      <i class="icon time ver-middle"></i>时间：{{item.time}}
                      <span class="price fr" v-if='item.isFree'>{{item.price}}</span>
                      <span class="price fr" v-else><em>{{item.price}}</em>元 起</span>
                    </div>
                    <div class="pos">
                      <i class="icon pos ver-middle"></i>地点：{{item.pos}}
                    </div>
                    <div class="num">
                      <i class="icon numL ver-middle"></i>人数限额：{{item.num}}
                    </div>
                    <div class="park">
                      <span class="parkLogo ver-middle">
                        <!-- <img v-lazy="item.logo" alt=""> -->
                      </span>
                      {{item.parkname}}
                    </div>
                  </div>
                </li>
              </router-link>
            </ul>
          </div>
          <div class="forest" v-else>
            <div class="tit-bar">
              活动预告
              <div class="more fr" @click='actTab1()'>
                更多
              </div>
            </div>
            <ul>
              <router-link to='/actDetail' v-for='(item,index) in this.$store.state.activity.acts' v-if="index<1" key='item.tit'>
                <li>
                  <div class="imgBox">
                    <img v-lazy="item.img" alt="">
                  </div>
                  <div class="info">
                    <div class="tit">{{item.tit}}</div>
                    <div class="time">
                      <i class="icon time ver-middle"></i>时间：{{item.time}}
                      <span class="price fr" v-if='item.isFree'>{{item.price}}</span>
                      <span class="price fr" v-else='item.isFree'><em>{{item.price}}</em>元 起</span>
                    </div>
                    <div class="pos">
                      <i class="icon pos ver-middle"></i>地点：{{item.pos}}
                    </div>
                    <div class="num">
                      <i class="icon numL ver-middle"></i>人数限额：{{item.num}}
                    </div>
                    <div class="park">
                      <span class="parkLogo ver-middle">
                        <!-- <img v-lazy="item.logo" alt=""> -->
                      </span>
                      {{item.parkname}}
                    </div>
                  </div>
                </li>
              </router-link>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <bot-footer/>
  </div>
</template>

<script>
import header from '../header/header.vue';
import footer from '../footer/footer.vue';
import {mapState} from 'vuex'
export default {
  data(){
    return{
      nowIndex:0,
      isShow:true,num:0
    }
  },
  computed:mapState([
    'listCity'
  ]),
  methods:{
    addClass1(index){
      this.num=index
    },
    // 活动tab切换
    actTab1:function(){
      this.isShow=true
    },
    actTab2:function(){
      this.isShow=false
    }
  },
  mounted(){
    document.title = '解忧工场-活动',
    this.$store.dispatch('load_city_list')
  },
  components:{
    'top-header':header,
    'bot-footer':footer
  }
}
</script>

<style lang="less">
@import "activity.less";
</style>
